
var cir1,cir2,cir3,cir4,ds1,ds2,ds3;

var canvasID = "arrow_svg";


$(document).ready(function() {
	
	var pathPts1 = [[150,170],[360,320],[450,220]];
	var pathPts2 = [[450,220],[450,20],[1100,20]];
	var pathPts3 = [[450,220],[1100,220]];
	var pathPts4 = [[450,220],[450,420],[1100,420]];
	
	var docSVG = $("#" + canvasID).svg();
	
	document.getElementById(canvasID).getElementsByTagName("svg")[0].setAttribute('height',500);
	document.getElementById(canvasID).getElementsByTagName("svg")[0].setAttribute('width',1200);
	
	cir1 = new Circuit(canvasID,pathPts1,0,'large',10);
	cir2 = new Circuit(canvasID,pathPts2,1,'medium',10);
	cir3 = new Circuit(canvasID,pathPts3,2,'small',10);
	cir4 = new Circuit(canvasID,pathPts4,3,'large',10);
	
	// initialize circuits
	cir1.initCircuit();
	cir2.initCircuit();
	cir3.initCircuit();
	cir4.initCircuit();
	
	ds1 = new DeviceSound(document.getElementById("appliance1"),'ds1Player','vacuumcleaner');
	ds2 = new DeviceSound(document.getElementById("appliance2"),'ds2Player','blowdryer');
	ds3 = new DeviceSound(document.getElementById("appliance3"),'ds3Player','dishwasher');
	
	ds1.turnOn();
	ds2.turnOn();
	ds3.turnOn();
	
	
	// event handlers for sound on/off radio buttons
	$("input[name='sound toggle group']").change( function() {
		if ($(this).val() == 'sound on')
		{
			ds1.unmute();
			ds2.unmute();
			ds3.unmute();
		}
		else
		{
			ds1.mute();
			ds2.mute();
			ds3.mute();
		}
	});
	
	// event handler to stop ESC event from making arrows pause - why doesn't this work?
	$(document).keypress(function(e) {
		if (e.keyCode == 27) { alert("ESC key event"); e.stopPropagation(); } 
	});
	
});

// resume arrow animation
function unpauseArrows()
{
	document.getElementById(canvasID).getElementsByTagName("svg")[0].unpauseAnimations();
}

// pause arrow animation
function pauseArrows()
{
	document.getElementById(canvasID).getElementsByTagName("svg")[0].pauseAnimations();
}

// reset arrow animation
function resetArrows()
{
	document.getElementById(canvasID).getElementsByTagName("svg")[0].setCurrentTime(0);
}

/*
	decides whether or not circuit 1 should have any flow on it, depending on whether or not any post-meter switches are on and 
	whether or not switch 1 is in the closed position
*/
function computeFlowOnCircuit1()
{
	// if flipping this switch turns off all post-meter arrows, stop flow on switch 1
	if (!cir2.on && !cir3.on && !cir4.on)
	{
		cir1.setState(false);
	}
	// otherwise, if at least one is on and the main is flipped on, let there be flow on switch 1
	if ((cir2.on || cir3.on || cir4.on) && document.getElementById('switch1_svg').getAttribute('aria-checked') == 'true')
	{
		cir1.setState(true);
	}
	
}

// turn on/off arrow flow on switch 1
function switch1Toggle(bool)
{
	cir1.setState(bool);
	if (!bool)
	{
		// cascade effect of main switch being on/off
		cir2.setState(false);
		cir3.setState(false);
		cir4.setState(false);
		ds1.turnOff();
		ds2.turnOff();
		ds3.turnOff();
	}
	else
	{
		if (cir2.on)
		{
			ds1.turnOn();
		}
		if (cir3.on)
		{
			ds2.turnOn();
		}
		if (cir4.on)
		{
			ds3.turnOn();
		}
	}
	computeFlowOnCircuit1();
}

// turn on/off arrow flow on switch 2
function switch2Toggle(bool)
{
	cir2.setState(bool);
	if (bool)
	{
		ds1.turnOn();
	}
	else
	{
		ds1.turnOff();
	}
	computeFlowOnCircuit1();
}

// turn on/off arrow flow on switch 3
function switch3Toggle(bool)
{
	cir3.setState(bool);
	if (bool)
	{
		ds2.turnOn();
	}
	else
	{
		ds2.turnOff();
	}
	computeFlowOnCircuit1();
}

// turn on/off arrow flow on switch 4
function switch4Toggle(bool)
{
	cir4.setState(bool);
	if (bool)
	{
		ds3.turnOn();
	}
	else
	{
		ds3.turnOff();
	}
	computeFlowOnCircuit1();
}